<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生表</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style type="text/css">
        /*表格样式*/
        div{
            text-align: center;
        }
        table {
            width: 90%;
            background: #ccc;
            margin: 10px auto;
            border-collapse: collapse;/*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/
        }
        th,td {
            height: 25px;
            line-height: 25px;
            text-align: center;
            border: 1px solid #ccc;
        }
        th {
            background: #eee;
            font-weight: normal;
        }
        tr {
            background: #fff;
        }
        #list tr:hover {
            background: #cc0;
        }
        td a {
            color: #06f;
            text-decoration: none;
            margin-left: 15%;
        }
        td a:hover {
            color: #06f;
            text-decoration: underline;
        }
        td input{
            border: none;
            font-size: 16px;

            background-color:transparent;
            color: #06f;
        }
        td input:hover{
            cursor: pointer;
            text-decoration: underline;
        }
        #add{
            float: right;
        }
        .Add{
            width:100%;
            border: none;
            outline:medium;
            text-align: center;
            /*border-inline: none;*/
        }
        #show{
            margin-top: 0;
            height: 25px;
            width: 25px;
            border-radius: 12.5px;
            border: none;
            color: white;
            background-color: #04aef1;
            font-size: 22px;
            font-weight: bold;
            cursor: pointer;
        }
        #show:hover{
            background-color: #01e2f6;
        }
        #addlist{
            display: none;
        }
    </style>
    <script>
        $(function get (){
            $.ajax({
                url:"http://localhost:8080/user",
                type:"get",
                success:function (data){
                    for(var i =0; i<data.length; i++){
                        var message = data[i];
                        $("<tr>").attr("id","Tr"+i).appendTo("#list");
                        $.each(message,function (j){
                            $("<td>").html(message[j]).appendTo("#Tr"+i);
                        })
                        $("<td>").html("<input type=\"submit\" value=\"删除\" class='cxq' val='"+data[i].id+"' >").appendTo("#Tr"+i);
                    }
                    //删除事件绑定
                    $(".cxq").click(function (){
                        var id = $(this).attr("val");
                        if(confirm("你确定要删除吗？")){
                            $.ajax({
                                url:"http://localhost:8080/user/"+id,
                                type: "delete",
                                success:function (data){
                                    location.reload();
                                }

                            })
                        }
                    });
                    //显示添加学生输入框
                    $("#show").click(function (){
                        $("#addlist").show();
                    });
                    //提交学生信息
                    $("#submit").click(function (){
                        var id = $("#id").val();
                        var name = $("#name").val();
                        var address = $("#address").val();
                        var age = $("#age").val();
                        var sex = $("#sex").val();
                        var phone = $("#phone").val();
                        var data={
                            "id":id,
                            "name":name,
                            "address":address,
                            "age":age,
                            "sex":sex,
                            "phone":phone
                        };
                        $.ajax({
                            url:"http://localhost:8080/user",
                            type:"post",
                            data:JSON.stringify(data),
                            dataType:"JSON",
                            contentType: 'application/json;charset=UTF-8',
                            success:function (data){
                                location.reload();
                                console.log("123");
                            },
                            error:function (){
                                console.log("error");
                            }
                        });
                    });
                }
            });

        });
    </script>
</head>

<body>
<div>
    <h1>学生信息表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="+" id="show" title="添加学生">
    </h1>

    <table id="list">

        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>家庭地址</th>
            <th>年龄</th>
            <th>性别</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
    </table>

    <table id="addlist">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>家庭地址</th>
            <th>年龄</th>
            <th>电话</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="text" class="Add" id="id"></td>
            <td><input type="text" class="Add" id="name"></td>
            <td><input type="text" class="Add" id="address"></td>
            <td><input type="text" class="Add" id="age"></td>
            <td><input type="text" class="Add" id="phone"></td>
            <td><input type="text" class="Add" id="sex"></td>
            <td><input type="button" value="添加" id="submit"></td>
        </tr>
    </table>
</div>
</body>
</html>